<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账目管理</el-breadcrumb-item>
      <el-breadcrumb-item>预算管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <div class="header">
        <div class="title">请设置您目前的预算为：</div>
        <br />
        <el-row :gutter="20">
          <el-col :span="7">
            <!-- 搜索框 -->
            <el-input
              placeholder="请输入您的预算"
              v-model="planMoney"
              clearable
            >
            </el-input>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <br />

    <!-- 分析预算卡片 -->
    <el-card v-if="planMoney">
      <div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div>
              <el-statistic
                group-separator=","
                :precision="2"
                :value="savemoney"
                :title="title"
              ></el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic title="预算">
                <template slot="formatter"> {{ planMoney }} </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic
                group-separator=","
                :precision="2"
                decimal-separator="."
                :value="getTotal"
                title="结余"
              >
                <template slot="prefix">
                  <i class="el-icon-s-flag" style="color: red"></i>
                </template>
                <template slot="suffix">
                  <i class="el-icon-s-flag" style="color: blue"></i>
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic
                :value="getTotal / planMoney"
                title="收支比"
                :precision="2"
              >
              </el-statistic>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 预算多 -->
    <el-card v-if="getTotal / planMoney > 0" class="tips">
      <div class="more">
        <h1 style="color:rgb(40, 220, 46);"><i class="el-icon-success"></i>预算多于消费</h1>

        <p>
          当您的预算多余您的花费时，以下是一些建议，可以帮助您充分利用这些额外的资金：
        </p>

        <p>1. <strong>储蓄和投资</strong>：</p>
        <p>
          -
          储蓄账户：将一部分资金存入高利息的储蓄账户，为未来的不时之需或大型购买做准备。
        </p>
        <p>
          -
          投资：根据您的风险承受能力和投资目标，考虑将资金投入到股票、债券、基金、房地产或其他投资渠道中。
        </p>

        <p>2. <strong>偿还债务</strong>：</p>
        <p>
          -
          如果您有贷款或信用卡债务，使用额外的资金来偿还这些债务可以减少利息支出，并加速债务偿还速度。
        </p>

        <p>3. <strong>教育投资</strong>：</p>
        <p>
          -
          考虑投资于自己的教育，例如报名参加课程、研讨会或获得新的资格认证，以提高您的职业技能和市场竞争力。
        </p>

        <p>...</p>

        <p>15. <strong>休闲与放松</strong>：</p>
        <p>- 投入资金用于放松和休闲活动，如按摩、SPA、瑜伽或冥想课程。</p>
      </div>
    </el-card>

    <!-- 预算少 -->
    <el-card v-if="getTotal / planMoney < 0" class="tips">
      <div class="little">
        <h1 style="color:red;"><i class="el-icon-warning"></i> 预算少于消费</h1>

        <p>
          当您的预算少于您的消费时，以下是一些建议，可以帮助您管理财务并减少不必要的支出：
        </p>

        <p>1. <strong>审查支出</strong>：</p>
        <p>- 仔细审查您的支出记录，找出不必要的开支，并尝试削减或消除它们。</p>

        <p>2. <strong>制定预算</strong>：</p>
        <p>
          -
          制定一个详细的预算计划，明确收入和支出的分类，并确保每个月都能平衡收支。
        </p>

        <p>3. <strong>削减不必要的消费</strong>：</p>
        <p>- 评估您的购物习惯，并考虑减少购买非必需品或奢侈品。</p>

        <p>4. <strong>优先支付重要账单</strong>：</p>
        <p>- 确保先支付必要的账单，如房租、水电费、贷款等，再考虑其他消费。</p>

        <p>5. <strong>储蓄和紧急储备金</strong>：</p>
        <p>
          -
          尽可能储蓄一部分资金，并建立一个紧急储备金账户，以应对突发的财务需求。
        </p>

        <p>6. <strong>减少债务</strong>：</p>
        <p>
          - 如果您有贷款或信用卡债务，尝试制定一个还款计划，并逐步减少债务负担。
        </p>

        <p>7. <strong>比较购物</strong>：</p>
        <p>
          -
          在购买商品或服务之前，比较不同供应商的价格和质量，选择性价比更高的选项。
        </p>

        <p>8. <strong>自制力和延迟满足</strong>：</p>
        <p>
          -
          学会控制自己的消费欲望，不要立即购买想要的东西，而是等待合适的时机或价格。
        </p>

        <p>9. <strong>增加收入</strong>：</p>
        <p>
          - 考虑寻找额外的收入来源，如兼职工作、副业或投资，以增加您的总收入。
        </p>

        <p>10. <strong>寻求专业建议</strong>：</p>
        <p>
          -
          如果您感到无法管理自己的财务，考虑咨询专业的财务顾问或机构，以获取更具体的建议和指导。
        </p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //预算

      planMoney: "",
      savemoney: "",
      //以下是统计数值的数据绑定
      title: "账单总和",
      //
    };
  },
  methods: {
    saveMoney() {
      this.savemoney = parseInt(window.sessionStorage.getItem("money"), 10);
    },
  },
  created() {
    this.saveMoney();
  },
  computed: {
    getTotal() {
      return parseInt(this.savemoney, 10) + parseInt(this.planMoney, 10);
    },
  },
};
</script>

<style scoped>
.tips{
  margin-top: 10px;
}
</style>